<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04元素类名操作</title>
		<!--html:  h1   div  id="targetElment"
		                四个按钮  id="addClassBtn"
						         id="removeClassBtn"
								 id="toggleClassBtn"
								 id="hassClassBtn"
		                   div  id="resultArea"
		    css:  .bg{300*300  背景色}
			      .bd{10px 实线边框  倒角：圆}
----------------------------------------------------------------------------------------
        元素类名操作：针对css中类名，可以做添加，移除，切换和包含类名操作
		           addClass()   有参【1个参或者多参】
				                功能：匹配元素集合中的所有元素添加一个类名或者多个类名
				removerClass()  有参【1个参或者多参】
				                功能：匹配元素集合中的所有元素移除一个类名或者多个类名
				toggleClass()   功能：如果元素有指定类名则移除，没有则添加
				hasClass()      功能：检查匹配元素集合中是否存在指定类名，返回值bool
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bg {
				width: 300px;
				height: 300px;
				background: #55aaff;
			}

			.bd {
				border: 10px solid #ff55ff;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<!-- html结构  4个按钮 2个空间 -->
		<h1></h1>
		<div id="targetElment"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">判断存在类名</button>
		<div id="resultArea"></div>
		<script>
			//1.类名切换：css存在可用类名  点击添加类名  实现效果300*300 红色背景色
			$("#addClassBtn").click(function() {
				$("#targetElment").addClass("bg bd");
				$("#resultArea").html("<h4>已经切换样式:.bg</h4>");
			});
			//2.移除类名：实现效果    点击移除类名 实现300*300 红色背景色
			$("#removeClassBtn").click(function() {
				$("#targetElment").removeClass("bd bg");
				$("#resultArea").html("<h4>已经移除样式:.bd</h4>");
			});
			//3.切换类名   实现效果：点击切换类名  实现300*300的圆边框  红色背景色
			$("#toggleClassBtn").click(function() {
				//存在bg---移除  不存在bg---添加
				$("#targetElment").toggleClass("bd");
				$("#resultArea").html("<h4>已经切换样式:存在就移除 不存在就添加</h4>");
			});
			//3.样式全部移除  实现效果  实现300*300 红色背景色
			$("#toggleClassBtn").click(function() {
				//存在bg---移除  不存在bg---添加
				$("#targetElment").toggleClass("bg");
				$("#resultArea").html("<h4>已经切换样式:存在就移除 不存在就添加</h4>");
			});
			//4.检查类名是否存在
			$("#hasClassBtn").click(function() {
				//存在bg---移除  不存在bg---添加
				var hc=$("#targetElment").hasClass("bd");
				$("#resultArea").text("目标元素bg类名是否存在"+hc);
			});
		</script>
	</body>
</html>